<template>
  <footer>
    <div class="box">
      <div class="wxbox">
        <ul>
          <li v-if="site_wechat_gzh"><img :src="site_wechat_gzh" alt="微信公众号"><span>微信公众号</span></li>
          <li v-if="site_wechat"><img :src="site_wechat" alt="我的微信"><span>博主微信</span></li>
        </ul>
      </div>
      <div class="endnav">
        <p><b>站点声明：</b></p>
        <p>1.本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。</p>
        <p>2.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。</p>
        <p>3.本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向本站举报。举报邮箱：<a
            :href="'http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=' + encodeURIComponent(site_email)"
            target="_blank">{{ site_email }}</a></p>
        <p>Copyright ©{{ copyright }} 川塔<img src="../../assets/icons/fa-gongan.png" alt="备案图标" class="gongan-icon">
          <a href="https://beian.mps.gov.cn/#/query/webSearch" class="footer-text">{{ public_record}}</a> |
            <a href="https://beian.miit.gov.cn/" class="footer-text">{{ icp }}</a></p>
      </div>
    </div>
    <!-- 返回顶部按钮 -->
    <ul class="back-to-top">
      <li class="top-btn" @click="scrollToTop" v-show="showButton"><i class="layui-icon layui-icon-top"></i></li>
    </ul>
  </footer>
</template>

<script setup>
const showButton = ref(false);
const site_email = ref(''); // 邮箱
const site_wechat = ref(''); // 微信公众号
const site_wechat_gzh = ref(''); // 微信公众号
const copyright = ref(''); // 版权信息
const public_record = ref(''); // 公网备案号
const icp = ref(''); // 备案号
const name = ref(''); // 网站名称

const fetchSiteInfo = async () => {
  try {
    const response = await axios.get('/api/blog/siteinfo/blogfooter', { requiresAuth: false });
    const data = response.data;
    site_email.value = data.bloguser.email || '';
    site_wechat.value = data.bloguser.wechat_qrcode || '';
    site_wechat_gzh.value = data.bloguser.wechat_gzh_qrcode || '';
    copyright.value = data.copyright || '2024-2025';
    public_record.value = data.public_record || '贵公网安备52010302003637号';
    icp.value = data.icp || '黔ICP备2024031908号';
    name.value = data.name || '川塔';
  } catch (error) {
    console.error('Error fetching site info:', error);
  }
};

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

const handleScroll = () => {
  showButton.value = window.scrollY > 100;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  fetchSiteInfo();
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
@import '//cdnjs.cloudflare.com/ajax/libs/layui/2.8.11/css/layui.min.css';
footer {
  background: var(--nav-bg-color, #373D41);
  width: 100%;
  border-top: #00C1DE 4px solid;
  padding: 10px 0;
  color: var(--text-color, #73777a);
  font-size: 14px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.box {
  margin: 0 auto;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
  max-width: 1200px;
}

.wxbox {
  overflow: hidden;
  float: left;
  margin-right: 25px;
}

.wxbox li {
  float: left;
  margin: 0 20px;
  text-align: center;
}

.wxbox img {
  height: 120px;
}

.wxbox span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-color, #999);
}

.endnav {
  float: left;
}

.endnav b {
  font-size: 16px;
  color: #00c1de;
}

.endnav p {
  margin-bottom: 5px;
}

footer a {
  color: var(--text-color, #73777a);
}

footer a:hover {
  color: #00C1DE;
}

.gongan-icon {
  position: relative;
  top: 0;
  margin-left: 5px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: #fff;
}
.back-to-top {
  position: fixed; /* 使按钮固定在视口中 */
  bottom: 20px; /* 距离底部的距离 */
  right: 20px; /* 距离右侧的距离 */
  z-index: 1000; /* 确保按钮在最上层 */
}

.top-btn {
  color: #fff; /* 文字颜色 */
  border: none; /* 去掉边框 */
  background-color: #cccccc; /* 背景颜色 */
  line-height: 40px; /* 文字垂直居中 */
  width: 45px; /* 按钮宽度 */
  height: 45px; /* 按钮高度 */
  text-align: center; /* 文字水平居中 */
  cursor: pointer; /* 指针样式变为手型 */
  transition: background-color 0.3s; /* 过渡效果 */
}

.top-btn i {
  font-size: 42px; /* 图标大小 */
  line-height: 45px; /* 图标垂直居中 */
  align-items: center; /* 图标水平居中 */
}
@media(max-width:992px){
  .box {
    margin: 0 auto;
    padding: 0 10px;
    width: 80%;
  }
  .wxbox {
    margin:10px auto;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .wxbox ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .endnav {
    float: left;
    margin: 0 auto;
    width: 100%;
    font-size: 13px;
  }
}
@media(max-width:480px){
  .wxbox {
    float: none;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }
}
</style>
